.add_new_type_border {
  display: flex;

  justify-content: center;

  align-items: center;
}

.add_new_type_border[selected_type='true'] > .add_new_type_icon {
  display: none;
}

.add_new_type_keyVal_inp {
  display: none;
}

.add_new_type_icon {
  text-align: center;
  font-size: 40px;
}

.add_new_type_container {
  display: none;
}

.add_new_type_search_active_border {
  display: flex;
  transition: width linear 3s;
}

.add_new_type_search_active_border[view_active='true'] > .search_type_border {
  margin-left: 10px;
}

.add_new_type_search_active_border[view_active='true'] > .active_type_border {
  display: flex;
  flex-wrap: wrap;

  animation-name: active_posi;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes active_posi {
  0% {
    opacity: 0;
    width: 0px;
    transform: translate(calc(100% + 10px));
  }
  10% {
    opacity: 0;
    width: 80px;

    transform: translate(calc(100% + 10px) * 0.9);
  }
  20% {
    opacity: 0.2;
    width: 160px;

    transform: translate(calc((100% + 10px) * 0.8));
  }
  50% {
    opacity: 0.5;
    width: 400px;

    transform: translate(0);
  }
  100% {
    opacity: 1;
    width: 400px;

    transform: translate(0);
  }
}
